<template>
  <div class="con">
    <div style="display: flex;justify-content: space-between">
      <div>
        <el-button type="primary" size="small" @click="openStart()">开始背调查询</el-button>
      </div>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="70px">
        <el-form-item label="关键字" prop="keyword">
          <el-input
            v-model="queryParams.keyword"
            placeholder="请输入姓名/身份证/手机号"
            clearable/>
        </el-form-item>
        <el-form-item label="授权状态" prop="authStatus">
          <el-select v-model="queryParams.authStatus" placeholder="请选择授权状态">
            <el-option
              label="未授权"
              value="未授权">
            </el-option>
            <el-option
              label="已授权"
              value="已授权">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间" prop="createTime">
          <el-date-picker
            v-model="queryParams.createTime"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table v-loading="loading" :data="queryList" style="width: 100%">
      <el-table-column label="订单编号" align="center" prop="orderNo" width="200"/>
      <el-table-column label="姓名" align="center" prop="name"/>
      <el-table-column label="身份证" align="center" prop="idNumber"/>
      <el-table-column label="手机号" align="center" prop="tel"/>
      <el-table-column label="创建时间" align="center" prop="createTime"/>
      <!--      <el-table-column label="背调渠道" align="center" prop="channel"/>-->
      <el-table-column label="授权方式" align="center" prop="authMethod"/>
      <el-table-column label="授权状态" align="center" prop="authStatus"/>
      <el-table-column label="授权确认人脸" align="center" prop="authContract">
        <template slot-scope="scope">
          <el-button v-if="scope.row.authStatus == '已人脸授权'" type="text" @click="lookFaceAuth(scope.row)">
            查看
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="查询报告数量" align="center" prop="reportNum"/>
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <div class="but">
            <el-button size="mini" type="primary" @click="openReport(scope.row)" style="margin-bottom: 2px">
              {{ scope.row.reportNum > 0 ? '查看报告' : '选择报告' }}
            </el-button>
            <el-popover
              placement="left"
              width="300"
              trigger="click">
              <div id="hmd">
                <span>风险标签：</span>
                <span class="bq" v-for="l of riskLabel" @click="addBlack(scope.row, l)">
                    {{ l }}
                </span>
              </div>
              <el-tag class="i2" slot="reference" size="small">加入黑名单
              </el-tag>
            </el-popover>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"/>

    <el-dialog :visible.sync="open" :close-on-click-modal="false" width="90%">
      <div v-if="open" style="height: 80vh;overflow-y: auto;background-color:#f3f9ff">
        <add v-if="comp == 'add'" @addSuccess="addSuccess"/>
        <report v-if="comp == 'report'" :orderNo="row.orderNo" :id="row.id"/>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="productOpen" :close-on-click-modal="false">
      <product v-if="productOpen" @choose="handleChoose" :choose="false"/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="productOpen = false">取 消</el-button>
        <el-button type="primary" @click="addLook()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
  import product from "@/views/system/beidiao/product.vue"
  import add from "@/views/system/beidiao/add/index.vue"
  import report from "@/views/system/beidiao/report/index.vue"
  import {list, addLook, lookAuthImg} from "@/api/system/beiDiao"
  import {labels} from "@/api/system/blacklist";
  import {addBlacklist} from "@/api/system/blacklist"

  export default {
    name: "beidiao",
    components: {
      product,
      add,
      report
    },
    data() {
      return {
        riskLabel: [],
        comp: null,
        labelsOptions: [],
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        // 进件记录表格数据
        queryList: [],
        // 是否显示弹出层
        open: false,
        productOpen: false,
        openAddBlackList: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,

          keyword: null,
          authStatus: null,
          createTime: null,
        },
        productId: null,
        row: null,

        // 表单校验
        rules: {
          name: [
            {min: 2, max: 20, message: '姓名长度必须介于 2 和 20 之间', trigger: 'blur'},
          ]
        }
      }
    },
    created() {
      this.getList()
      labels().then(res => {
        this.riskLabel = res.data
      })
    },
    methods: {
      openStart() {
        this.comp = 'add'
        this.open = true
      },
      openReport(row) {
        this.row = row
        if (row.authStatus == '已线下授权' || row.authStatus == '已人脸授权'){
          if (row.reportNum > 0) {
            this.comp = 'report'
            this.open = true
          } else {
            this.productOpen = true
          }
        } else {
          this.$modal.msgWarning("尚未完成授权操作，不能查看");
        }
      },
      addLook() {
        if (!this.productId) {
          return
        }
        addLook({
          productId: this.productId,
          orderNo: this.row.orderNo,
          reportId: this.row.id
        }).then(res => {
          this.productOpen = false
          this.comp = 'report'
          this.open = true
        })

      },
      lookFaceAuth(row) {
        lookAuthImg(row.orderNo).then(res => {
          if (res.data) {
            let urlInfo = 'data:image/png;base64,' + res.data.photo
            let meg = res.data.msg
            this.$message({
              type: 'success',
              showClose: true,
              dangerouslyUseHTMLString: true,
              message: `<div><img src="${urlInfo}" /><p style="text-align: center">${meg}</p></div>`
            });
          }
        })
      },
      handleChoose(data) {
        this.productId = data
      },
      addSuccess() {
        this.open = false;
        this.getList()
      },
      addBlack(row, label) {
        let from = {
          name: row.name,
          cardNo: row.idNumber,
          tel: row.tel,
          labels: '[\"'+label+'\"]'
        }
        addBlacklist(from).then(res => {
          this.$modal.msgSuccess("成功");
        });
      },
      /** 查询进件记录列表 */
      getList() {
        this.loading = true;
        list(this.queryParams).then(response => {
          this.queryList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      }
    }
  };
</script>
<style scoped>
  .con {
    margin: 8px;
    padding: 8px;
    background-color: #fafafa;
    border-radius: 6px;
  }

  .but {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

</style>
